<template>
    <el-container class="container">
        <el-dialog v-model="dialogVisible" title="修改密码" width="500">
            <el-form :model="resetPwdform" :rules="rules" ref="resetPwdformTag">
                <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldpwd">
                    <el-input v-model="resetPwdform.oldpwd" autocomplete="off" type="password" />
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth" prop="pwd1">
                    <el-input v-model="resetPwdform.pwd1" autocomplete="off" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="pwd2">
                    <el-input v-model="resetPwdform.pwd2" autocomplete="off" type="password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-aside :width="asideWidth" class="aside">
            <router-link to="/" class="brand"><strong>知了</strong><span v-show="!isCollapse">OA系统</span></router-link>
            <el-menu :router="true" active-text-color="#ffd04b" background-color="#343a40" class="el-menu-vertical-demo"
                :default-active="defaultActive" text-color="#fff" :collapse="isCollapse" :collapse-transition="false">
                <template v-for="route in routes[0].children">
                    <el-menu-item v-if="!route.children" :index="route.name" :route="{ name: route.name }">
                        <el-icon>
                            <component :is="route.meta.icon"></component>
                        </el-icon>
                        <span>{{ route.meta.text }}</span>
                    </el-menu-item>

                    <el-sub-menu v-else :index="route.name">
                        <template #title>
                            <el-icon>
                                <component :is="route.meta.icon"></component>
                            </el-icon>
                            <span>{{ route.meta.text }}</span>
                        </template>
                        <template v-for="child in route.children">
                            <el-menu-item v-if="!child.meta?.hidden" :index="child.name" :route="{ name: child.name }">
                                <el-icon>
                                    <component :is="child.meta.icon"></component>
                                </el-icon>
                                <span>{{ child.meta.text }}</span>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="header">
                <div class="left-header">
                    <el-button v-show="isCollapse" :icon="Expand" circle @click="onCollapseAside" />
                    <el-button v-show="!isCollapse" :icon="Fold" circle @click="onCollapseAside" />
                </div>
                <el-dropdown v-if="authStore.user">
                    <span class="el-dropdown-link">
                        <el-avatar :size="30" icon="UserFilled" />
                        <span style="margin-left: 10px;">[{{ authStore.user.department.name }}]{{
                            authStore.user.realname
                            }}</span>
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="onShowRestPwddlog">修改密码</el-dropdown-item>
                            <el-dropdown-item divided @click="onExit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main class="main">
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup name="frame">
import { ref, computed, reactive, onMounted } from 'vue'
import {
    Expand,
    Fold,
    Message,
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import authHttp from '@/api/authHttp'
import { ElMessage } from 'element-plus'
import routes from '@/router/frame'

let resetPwdform = reactive({
    oldpwd: '',
    pwd1: '',
    pwd2: ''
})

const authStore = useAuthStore()
console.log("User:", authStore.user)
let dialogVisible = ref(false)
let isCollapse = ref(true)
let formLabelWidth = '140px'
let asideWidth = computed(() => {
    if (isCollapse.value) {
        return '60px'
    } else {
        return '250px'
    }
})
let resetPwdformTag = ref()

const router = useRouter()
const onCollapseAside = () => {
    isCollapse.value = !isCollapse.value
}
// onMounted(()=>{
//     // defaultActive
// })
const onExit = () => {
    authStore.clearUserToken();
    router.push({ name: 'login' })
}
const onSubmit = () => {
    resetPwdformTag.value.validate(async (valid, fields) => {
        if (valid) {
            try {
                await authHttp.resetPwd(resetPwdform.oldpwd, resetPwdform.pwd1, resetPwdform.pwd2)
                ElMessage.success('修改密码成功')
                dialogVisible.value = false
            }
            catch (error) {
                ElMessage.error(error)
            }
        } else {
            ElMessage.error('请检查输入')
        }
    })
}
const onShowRestPwddlog = () => {
    resetPwdform.oldpwd = ''
    resetPwdform.pwd1 = ''
    resetPwdform.pwd2 = ''
    dialogVisible.value = true
}
let rules = reactive({
    oldpwd: [
        {
            required: true,
            message: "请输入旧密码",
            trigger: "blur"
        },
        {
            min: 6,
            max: 20,
            message: "密码长度在6-20位之间",
            trigger: "blur"
        }
    ],
    pwd1: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur"
        },
        {
            min: 6,
            max: 20,
            message: "密码长度在6-20位之间",
            trigger: "blur"
        }
    ],
    pwd2: [
        {
            required: true,
            message: "请确认密码",
            trigger: "blur"
        },
        {
            min: 6,
            max: 20,
            message: "密码长度在6-20位之间",
            trigger: "blur"
        }
    ]
})
</script>

<style scoped>
.container {
    height: 100vh;
    background-color: #f4f6f9;
}

.aside {
    background-color: #343a40;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !important;
}

.aside .brand {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #434a50;
    background-color: #232631;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.header {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
}

el-menu {
    border-right: none;
}
</style>